<template>
	<section>
		<el-form :inline="true" :model="queryParams" class="demo-form-inline">
			<el-form-item label="车号:">
				<el-input v-model="queryParams.plateNumber" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="供应商:">
				<el-select v-model="queryParams.supplierId" placeholder="请选择">
					<el-option label="张三" value="shanghai"></el-option>
					<el-option label="李四" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="线路牌编号:">
				<el-input v-model="queryParams.streetNo" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="车辆颜色:">
				<el-select v-model="queryParams.color" placeholder="请选择">
					<el-option label="红" value="shanghai"></el-option>
					<el-option label="白" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
				<el-button type="default">重置</el-button>
				<el-button type="text">展开</el-button>
			</el-form-item>
		</el-form>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column type="index" :index="indexMethod">
					</el-table-column>
					<el-table-column prop="supplierId" label="供应商">
					</el-table-column>
					<el-table-column prop="streetNo" label="车辆识别码">
					</el-table-column>
					<el-table-column prop="plateNumber" label="车号">
					</el-table-column>
					<el-table-column prop="streetNo" label="线路牌编号">
					</el-table-column>
					<el-table-column prop="color" label="车辆颜色">
					</el-table-column>
					<el-table-column prop="carSize" label="车辆尺寸(长*宽*高 米)">
					</el-table-column>
					<el-table-column prop="scrapTime" label="强制报废日期">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="goto">查看</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>

		<!--分页-->
		<el-row class="paginations" justify="end" :gutter="20">
			<el-col :span="21" >
				<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryParams.curr"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="queryParams.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="count">
				</el-pagination>
			</el-col>
			<el-col :span="2">
				<el-button type="primary" @click="addCar">新增车辆</el-button>
			</el-col>
		</el-row>
	</section>
</template>

<script>
import { getPage } from "@/api/fzc/car";
	export default {
		data() {
			return {
				// 总条数
     			count: 0,
				queryParams: {
					curr: 1,
					limit: 10,
					plateNumber: undefined,
					supplierId: undefined,
				},
				formInline: {},
				tableData: [],

			}
		},
		created(){
			this.getList()
		},
		methods: {
			// 新增车辆
			addCar(){
				this.$router.push({
					path: '/addcar'
				})
			},
			handleSizeChange(val) {
				this.queryParams.limit = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.queryParams.curr = val
				this.getList()
			},
			/** 分页查询列表 */
			getList() {
			getPage(this.queryParams).then(res => {
				this.count = res.data.data.count
				this.tableData = res.data.data.data
			});
			},
			// 查询
			onSubmit() {
				console.log('submit!');
			},
			
			// 表格索引
			indexMethod(index) {
				return index * 1;
			},
			
			// 查看车辆详情
			goto(){						
				this.$router.push({ path:'/car_manage'})				
			}
		}
	}
</script>
<style>
	.paginations {
		padding: 50px 0 20px;
	}
</style>
